<template>
	<view class="rf-product-list" :style="{'background':backgroundColor}">
		<view class="rf-product-list-container">
			<block v-for="(item, index) in list" :key="index">
				<!--商品列表-->
				<view v-if="(index + 1) % 2 !== 0 || isList" class="rf-product-item list_box"
					@tap.stop="navTo(`/pages/product/product?id=${item.id}&sgid=${item.sgid}`)"
					:class="[isList ? 'rf-product-flex-list' : '']" hover-class="hover" :hover-start-time="150">
					<view class="rf-product-image-wrapper">
						<view class="rf-product-img-box" :class="isList?'pt0':null">
							<!-- <image :src="item.picture" mode="widthFix" :preview="false" -->

							<image :src="item.picture" mode="aspectFit" :preview="false"
								:class="[isList?'rf-product-list-img':'rf-product-img']"></image>
						</view>
						<!-- <text class="sketch in1line">{{ item.sketch }}</text> -->
						<view class="triangle-wrapper">
							<!-- <image class="triangle-tag" :src="item | filterTagName"></image> -->
						</view>
					</view>
					<view class="rf-pro-content">
						<view class="rf-pro-tit">{{ item.name }}</view>
					</view>
				</view>
				<!--商品列表-->
			</block>
		</view>
		<view class="rf-product-list-container" v-if="!isList">
			<block v-for="(item, index) in list" :key="index">
				<!--商品列表-->
				<view v-if="(index + 1) % 2 === 0" class="rf-product-item"
					@tap.stop="navTo(`/pages/product/product?id=${item.id}&sgid=${item.sgid}`)"
					:class="[isList ? 'rf-product-flex-list' : '']" hover-class="hover" :hover-start-time="150">
					<view class="rf-product-image-wrapper">
						<view class="rf-product-img-box">
							<image :src="item.picture" mode="widthFix" :preview="false"
								:class="[isList?'rf-product-list-img':'rf-product-img']"></image>
						</view>
						<!-- <text class="sketch in1line">{{ item.sketch }}</text> -->
						<view class="triangle-wrapper">
							<!-- <image class="triangle-tag" :src="item | filterTagName"></image> -->
						</view>
					</view>
					<view class="rf-pro-content">
						<view class="rf-pro-tit">{{ item.name }}</view>
					</view>
				</view>
				<!--商品列表-->
			</block>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec show" style="z-index: 9999;height: auto;" v-if="specClass === 'show'" @touchmove.stop.prevent="stopPrevent" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask" @tap="hideSpec"></view>
			<scroll-view class="layer" style="bottom: 0rpx;z-index: 9999;position: absolute;" @tap.stop="stopPrevent" scroll-y="true">
				<rf-attr-content :product="productDetail" @toggle="toggleSpec" :showBuyBtn="true"></rf-attr-content>
			</scroll-view>
			
		</view>
	</view>
</template>
<script>
	/**
	 * @des 兑图列表
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-05-15 10:49
	 */
	// import {
	// 	productDetail,
	// 	cartItemCount,
	// 	cartItemCreate
	// } from '@/api/product';
	import rfAttrContent from '@/components/rf-attr-content';
	import request from '@/common/request.js';
	// import $mAssetsPath from '@/config/assets.config';
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'eChart',
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 是否以列表展示 | 列表或大图
			isList: {
				type: Boolean,
				default: false
			},
			// 是否以列表展示 | 列表或大图
			bottom: {
				type: Number,
				default: 0
			},
			backgroundColor: {
				type: String
			}
		},
		components: {
			rfAttrContent
		},
		data() {
			return {

				specClass: 'none',
				moneySymbol: this.moneySymbol,
				productDetail: {},
				addCardGoodSgid: ''
			};
		},
		computed: {
			// addCartBtnDisabled() {
			// 	let arr = ['11000003', '11000004', '11000005', '11000006', '11000008'];

			// 	return this.product.point_exchange_type === '2' ||
			// 		this.product.point_exchange_type === '4' ||
			// 		parseInt(this.currentStock || this.product.stock, 10) === 0 ||
			// 		this.product.is_virtual === '1' ||
			// 		this.product.disabled_cart ||
			// 		!!arr.find(item => {
			// 			return item === this.sgid;
			// 		});

			// 	// return this.product.point_exchange_type === '2' ||
			// 	// 	this.product.point_exchange_type === '4' ||
			// 	// 	parseInt(this.currentStock || this.product.stock, 10) === 0 ||
			// 	// 	this.product.is_virtual === '1' ||
			// 	// 	this.product.disabled_cart ||
			// 	// 	!!arr.find(item => {
			// 	// 		return item === this.sgid;
			// 	// 	});
			// },
		},
		filters: {
			filterTotalSales(val) {
				if (val > 10000) {
					val = `${(val / 10000).toFixed(2)}w`;
				}
				return val;
			},
		},
		// created(){
		// 	var that=this
		// 	setTimeout(()=>{
		// 		console.log(2212,that.list)
		// 	},3000)
		// },
		methods: {
			...mapMutations(['vuex_setCartNum']),

			addCartBtnDisabled(curGood) {
				let arr = ['11000003', '11000004', '11000005', '11000006', '11000008'];

				return curGood.point_exchange_type === '2' ||
					curGood.point_exchange_type === '4' ||
					parseInt(curGood.stock, 10) === 0 ||
					curGood.is_virtual === '1' ||
					curGood.disabled_cart ||
					!!arr.find(item => {
						return item === this.sgid;
					});

				// return this.product.point_exchange_type === '2' ||
				// 	this.product.point_exchange_type === '4' ||
				// 	parseInt(this.currentStock || this.product.stock, 10) === 0 ||
				// 	this.product.is_virtual === '1' ||
				// 	this.product.disabled_cart ||
				// 	!!arr.find(item => {
				// 		return item === this.sgid;
				// 	});
			},


			// 跳转详情
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			// 获取产品详情
			async getProductDetail(row) {
				this.addCardGoodSgid = row.sgid

				console.log('row------------1', row)
				await request.httpRequest({
					url:'api/v1/product/product/view'
				},{
						id: row.id
					})
					.then(async r => {
						this.productDetail = await r.data.data;
						console.log(this.productDetail);
						this.productDetail.sku_name = row.name;
						this.specClass = 'show';
					});
					
				console.log(this.productDetail);
			},
			// 规格弹窗开关
			toggleSpec(row) {
				if (parseInt(row.status, 10) === 0) return;
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					if (row.stock === 0) {
						this.$mHelper.toast('库存不足');
						return;
					}
					if (row.type.toString() === '1') {
						// 加入购物车



						this.handleCartItemCreate(row.skuId, row.cartCount);
					} else if (row.type.toString() === '2') {
						// 立即购买
						const list = {};
						const data = {};
						data.sku_id = row.skuId;
						data.num = row.cartCount;
						if (
							this.productDetail.point_exchange_type.toString() === '2' ||
							this.productDetail.point_exchange_type.toString() === '4' ||
							(this.productDetail.point_exchange_type.toString() === '3' &&
								this.isPointExchange)
						) {
							list.type = 'point_exchange';
						} else {
							list.type = 'buy_now';
						}
						list.data = JSON.stringify(data);
						this.navTo(`/pages/order/create/order?data=${JSON.stringify(list)}`);
					}
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.getProductDetail(row);
				}
			},
			stopPrevent() {},
			hideSpec() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			},
			// 添加商品至购物车
			async handleCartItemCreate(skuId, cartCount) {
				await this.$http
					.post(`${cartItemCreate}`, {
						sku_id: skuId,
						num: cartCount,
						sgid: this.addCardGoodSgid
					})
					.then(async () => {
						await this.$http.get(`${cartItemCount}`).then(async r => {
							this.vuex_setCartNum(r.data);
						});
						this.$mHelper.toast('添加购物车成功');
					});
			}
		}
	};
</script>

<style lang='scss'>
	.rf-product-img-box {
		&.pt0 {
			padding-top: 0;
		}
	}
</style>
